<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8">
<title>Insert title here</title>
<link href="static/easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="static/easyui/themes/icon.css" rel="stylesheet" />
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<div>
		省份：
		<select class="easyui-combobox" name="province" id="province" style="width:200px;"></select>
		城市：
		<select class="easyui-combobox" name="city" id="city" style="width:200px;"></select>
		区县：
		<select class="easyui-combobox" name="county" id="county" style="width:200px;"></select>
		<br/>
		乡镇：
		<select class="easyui-combobox" name="town" id="town" style="width:200px;"></select>
		村委：
		<select class="easyui-combobox" name="village" id="village" style="width:200px;"></select>
		<br/>
		经度：<input class="easyui-textbox" id="lngNum" data-options="" style="width: 200px" /> 
		纬度：<input class="easyui-textbox" id="latNum" data-options="" style="width: 200px"/> 
		<br/>
		地址：<input class="easyui-textbox" id="address" data-options="" style="width: 500px"/>
		<a id="check" href="javascript:void(0)" class="easyui-linkbutton" onclick="check()" data-options="iconCls:'icon-add'">确定</a>
		<a id="chec" href="javascript:void(0)" class="easyui-linkbutton" onclick="geoCode('汉川市')" data-options="iconCls:'icon-edit'">编码</a>
	</div>
	
	<div id="container" style="width: 100%; height: 500px"></div>
	<script src="https://webapi.amap.com/loader.js"></script>
	<script>
	$(function() {
		$.ajax({
			type: "get",
			url: 'getArea?areaCode=0',
			success: function(response) {
				$('#province').combobox({
					data: response.data,
					valueField: 'id',
					textField: 'name'
				});
			}
		});
		// 选择了省份之后 加载城市
		$('#province').combobox({onSelect: function(record) {
			$.ajax({
				url: 'getArea?areaCode='+record.areaCode,
				type: 'get',
				success: function(response) {
					$('#city').combobox({
						data: response.data,
						valueField: 'id',
						textField: 'name'
					});
					map.setCenter([record.lng, record.lat]);
					map.setZoom(11);
				}
			})
		}});
		// 选择了城市之后 加载区县
		$('#city').combobox({onSelect: function(record) {
			$.ajax({
				url: 'getArea?areaCode='+record.areaCode,
				type: 'get',
				success: function(response) {
					$('#county').combobox({
						data: response.data,
						valueField: 'id',
						textField: 'name'
					});
					map.setCenter([record.lng, record.lat]);
					map.setZoom(12);
				}
			})
		}});
		// 选择了区县之后 加载乡镇街道
		$('#county').combobox({onSelect: function(record) {
			$.ajax({
				url: 'getArea?areaCode='+record.areaCode,
				type: 'get',
				success: function(response) {
					$('#town').combobox({
						data: response.data,
						valueField: 'id',
						textField: 'name'
					});
					map.setCenter([record.lng, record.lat]);
					map.setZoom(13);
				}
			})
		}});
		// 选择了乡镇之后 加载村居委
		$('#town').combobox({onSelect: function(record) {
			$.ajax({
				url: 'getArea?areaCode='+record.areaCode,
				type: 'get',
				success: function(response) {
					$('#village').combobox({
						data: response.data,
						valueField: 'id',
						textField: 'name'
					});
					map.setCenter([record.lng, record.lat]);
					map.setZoom(14);
				}
			})
		}});
		$('#village').combobox({onSelect: function(record) {
			map.setCenter([record.lng, record.lat]);
			map.setZoom(14);
			var province = $('#province').combobox('getText');
			var city = $('#city').combobox('getText');
			var county = $('#county').combobox('getText');
			var town = $('#town').combobox('getText');
			var village = record.name;
			geoCode(province+city+county+town+village)
		}});
		
	});
	// 高德地图组件
	var map;
	var marker;
	var infoWindow;
	var geocoder;
	var geolocation;
	// 作为回调参数
	var currentLng;
	var currentLat;
	var currentAddress;
	// 通过高德地图的编码 根据地址 查询经纬度
	function geoCode(address) {
		geocoder.getLocation(address, function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                var lnglat = [result.geocodes[0].location.lng,result.geocodes[0].location.lat]; 
                map.setCenter(lnglat);
                setMarker(map, lnglat);
		    	setLocationValue(lnglat, address);
                map.setFitView(marker);
            }else{
            	console.log('根据地址查询位置失败');
            }
        });
	}
	function setMarker(map, lnglat) {
        // 如果地图上已经有标记 则清除标记
    	if (marker) {
          marker.setMap(null);
          marker = null;
        }
    	// 在地图上添加新的标记
    	marker = new AMap.Marker({
		  map: map,
		  position:  lnglat
    	});
	}
	// 通过高德地图的逆编码 根据经纬度 查询地址
	function regeoCode(lnglat) {
		 
         geocoder.getAddress(lnglat, function(status, result) {
            if (status === 'complete'&&result.regeocode) {
                var address = result.regeocode.formattedAddress;
                setLocationValue(lnglat, address);
            }else{
                log.error('根据经纬度查询地址失败')
            }
        });
    };
    function setLocationValue(lnglat, address) {
    	$('#lngNum').textbox('setValue', lnglat[0]);
  	    $('#latNum').textbox('setValue', lnglat[1]);
        $('#address').textbox('setValue', address);
        currentLng = lnglat[0];
        currentLat = lnglat[1];
        currentAddress = address;
    }
	// 点击确认按钮
	function check() {
		// 使用本地存储空间localStorage，保存经纬度
		localStorage.lng = currentLng;
	    localStorage.lat = currentLat;
	    localStorage.address = currentAddress;
		parent.$("#topWindow").window("close");
	}
	 
	AMapLoader.load({
          "key": "84e3d9795d4be512a87855de2a0dc85e",
          // 申请好的Web端开发者Key，首次调用 load 时必填
          "version": "2.0",
          // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          "plugins": [],
          // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          "AMapUI": { // 是否加载 AMapUI，缺省不加载
            "version": '1.1',
            // AMapUI 版本
            "plugins": ['overlay/SimpleMarker'],
            // 需要加载的 AMapUI ui插件
          },
          "Loca": { // 是否加载 Loca， 缺省不加载
            "version": '2.0' // Loca 版本
          },
        }).then((AMap) =>{
        	// 加载逆编码插件
        	AMap.plugin('AMap.Geocoder', function() {
        		  geocoder = new AMap.Geocoder()
        		});
        	// 加载精确定位插件
        	AMap.plugin('AMap.Geolocation', function() {
        		  geolocation = new AMap.Geolocation({
        		    // 是否使用高精度定位，默认：true
        		    enableHighAccuracy: true,
        		    // 设置定位超时时间，默认：无穷大
        		    timeout: 10000,
        		    // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
        		    buttonOffset: new AMap.Pixel(10, 20),
        		    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        		    zoomToAccuracy: true,     
        		    //  定位按钮的排放位置,  RB表示右下
        		    buttonPosition: 'RB'
        		  })

        		  geolocation.getCurrentPosition(function(status,result){
        		        if(status=='complete'){
        		            onComplete(result)
        		        }else{
        		            onError(result)
        		        }
        		  });

        		  function onComplete (data) {
        		    // data是具体的定位信息
        		    currentLng = data.position.lng;
        		    currentLat = data.position.lat;
        		    regeoCode([currentLng,currentLat]);
        		  }

        		  function onError (data) {
        		    // 定位出错
        		    console.log(data);
        		  }
        		});
          map = new AMap.Map('container', {
            zoom: 11,
            //级别
            //中心点坐标
            viewMode: '3D' //使用3D视图
          });
          // 地图点击事件
          map.on('click', function(e) {
        	  setMarker(map, [e.lnglat.lng,e.lnglat.lat]);
        	  
        	  // 进行逆编码 设置经纬度和地址
        	  regeoCode([e.lnglat.lng, e.lnglat.lat]);
        	  
          })
        }).
        catch((e) =>{
          console.error(e); //加载错误提示
        });
</script>
</body>
</html>